<template>
  <div>

	<myheader></myheader>


	<br><br>

	<Breadcrumb :datas="datas"></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">
			
			<div>
				<Avatar :src="src" :width='150' fit='fill'></Avatar>
			</div>
			<div>
			密码 : <input type="text" v-model="password">
			</div>

			<br><br>

			<div>
				确认密码 : <input type="text" v-model="password1">
			</div>

			<br><br>
			
			<div>
				头像上传: <input type="file" @change="upload">
			</div>
			<br><br>
			<div>
			七牛云上传：<input type="file" @change="upload_qiniu">	
			{{ loadpercent }}
			<br><br>
			<Progress v-show="loadpercent_int" :percent="loadpercent_int" color="blue"><span slot="title"></span><span slot="text">{{ loadpercent_int }}%</span></Progress>
			</div>
			<br><br>
			<div v-if="shipin">
			<!-- 视频 -->
			<video id="video" :src="shipin" width="320" height="240" autoplay controls></video>
			<br><br>
			<!-- 画中画 -->
			<Button  @click="changepic">{{ mybutton }}</Button>
			</div>
			<br><br>
			<Button @click="submit">提交</Button>
			<div>
				关注商品列表：
				<Checkbox :datas="goods" label="关注商品" v-model="good_value"></Checkbox>
				<br>
				<Button color='green' @click='flow'>批量操作</Button>
			</div>
			
		</div>
	</section>
	
	
	<myfooter></myfooter>
	
    
  </div>
  
</template>


 
<script>

//组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';



export default {
  data () {
    return {
	  //面包屑导航
	  datas:[{title:'首页',route:{name:'index'}},{title:'个人主页'}],
	  msg: "这是一个变量",
	  password1:'',
	  password:'',
	  src:'',
	  uptoken:'',
	  //进度展示
	  loadpercent:'',
	  //整形进度条
	  loadpercent_int:0,
	  shipin:'',
	  img_list:['png','jpg','jpeg','bmp'],
	  video_list:['mp4','avi','mov','flv'],
	  //切换按钮变量
	  mybutton:'进入画中画',
	  //商品关注列表
	  goods:[],
	  goods:[],		//所有的
	  good_value:[],		//点选后剩下的
	  myid:{},

    }
  },
  //定义组件
  components:{
	'myheader':myheader,
	'myfooter':myfooter,

  },
  mounted:function(){
	//获取商品列表
	this.get_goods()
	//发送请求  获取用户信息
	this.axios.get('http://localhost:8000/userinfo/',{params:{uid:localStorage.getItem("uid")}}).then((result) =>{
		console.log(result);
		if(result.data.img != ''){
			//图片地址
			this.src = 'http://q68k4hqj9.bkt.clouddn.com/'+result.data.img;
		}
		if(result.data.video != null){
			//视频地址
			this.shipin = 'http://q68k4hqj9.bkt.clouddn.com/'+result.data.video;
		}
		
	});
	//获取密钥
    this.get_token();
   
  
},
methods: {
	//批量操作
		flow(){
			var goods = [];
			for(let i=0,l=this.good_value.length;i<l;i++){
				goods.push(this.myid[this.good_value[i]]);
			}
			var glist = JSON.stringify(goods);
			console.log(glist);

			this.axios({
				url:'http://127.0.0.1:8000/getflow/',
				params:{
					'uid':localStorage.getItem("uid"),
					'ids':glist,
					type:2,		//批量取关
				}
			}).then(resp=>{
				console.log(resp)
				this.$Message(resp.data.message)
			})
		},
		//获取关注商品
		get_goods(){
			this.axios({
				url:'http://127.0.0.1:8000/uidflow/',
				params:{
					'uid':localStorage.getItem("uid")
				}
			}).then(resp=>{
				console.log(resp)
				var goods = []
				for (let index = 0; index < resp.data.length; index++) {
					goods.push(resp.data[index].name)
					this.myid[resp.data[index].name] = resp.data[index].id
				}
				this.goods = goods;
				this.good_value = goods
				console.log(goods)
			})
		},
	//定义画中画切换
	changepic(){
		//判断是否处于画中画界面
		if(video != document.pictureInPictureElement){
			//尝试进入画中画模式
			video.requestPictureInPicture();
			this.mybutton = '退出画中画'
		}else{
			//退出画中画
			document.exitPictureInPicture()
			this.mybutton = '进入画中画'
		}
	},
	submit(){
		// 判断两次密码是否一致
		if(this.password==this.password1){
			// 发送请求
			this.axios.get('http://127.0.0.1:8000/updateuser/',{params:{uid:localStorage.getItem('uid'),password:this.password1}}).then((res)=>{
			console.log(res);
			// 动态赋值
			this.$Message(res.data.msg)
		});
		}
		else{
			this.$Message('两次输入密码不一致')
			return false;
		}
	},
	//上传七牛云
  	upload_qiniu:function(e){

  		//声明文件对象
		let file = e.target.files[0];
		//声明参数类型
		let param = new FormData();
		//截取文件后缀名
		let suffix = file.name.split(".").pop()
		//添加文件
		param.append('file',file);
		param.append('token',this.uptoken);
		//声明请求头
		let config = {
			headers:{'Content-Type':'multipart/form-data'}
		}
		//判断后缀是视频的情况
		if (this.video_list.indexOf(suffix)>-1){
			//定制axios请求
			const axios_qiniu = this.axios.create({withCredentials:false});

			axios_qiniu({

				method:'POST',
				url:'http://up-z1.qiniu.com/',
				data:param,
				timeout:30000,
			//上传进度捕捉方法
			onUploadProgress:(e)=>{
			//计算进度
			var complete = (e.loaded/e.total)   //上传的大小/文件总大小
			//判断
			if (complete < 1){
			this.loadpercent = (complete*100).toFixed(2)+'%';
			this.loadpercent_int = parseInt((complete * 100).toFixed(2));
			}
		}

			}).then(result =>{

			console.log(result);
			//请求结束设置为100%
			this.loadpercent = '100%';
			this.loadpercent_int = 100;
			this.shipin = 'http://q68k4hqj9.bkt.clouddn.com/'+result.data.key
			//修改视频地址
			//发送请求
			this.axios.get('http://localhost:8000/update_user_video/',{params:{uid:localStorage.getItem("uid"),img:result.data.key}}).then((result) =>{

				console.log(result);
				});
			});
		}
		//判断后缀名为图片时：
			else if(this.img_list.indexOf(suffix)>-1){
				//定制axios请求
			const axios_qiniu = this.axios.create({withCredentials:false});

			axios_qiniu({

				method:'POST',
				url:'http://up-z1.qiniu.com/',
				data:param,
				timeout:30000,
			//上传进度捕捉方法
			onUploadProgress:(e)=>{
			//计算进度
			var complete = (e.loaded/e.total)   //上传的大小/文件总大小
			//判断
			if (complete < 1){
			this.loadpercent = (complete*100).toFixed(2)+'%';
			this.loadpercent_int = parseInt((complete * 100).toFixed(2));
			}
		}

			}).then(result =>{

			console.log(result);
			//请求结束设置为100%
			this.loadpercent = '100%';
			this.loadpercent_int = 100;
			this.src = 'http://q68k4hqj9.bkt.clouddn.com/'+result.data.key
			//修改视频地址
			//发送请求
			this.axios.get('http://localhost:8000/update_user_img/',{params:{uid:localStorage.getItem("uid"),img:result.data.key}}).then((result) =>{

				console.log(result);
				});
			});
			}
	  },
	  //获取令牌方法
    	get_token(){
  		//发送请求
		this.axios.get('http://localhost:8000/uptoken/').then((result) =>{

			console.log(result);
			//动态赋值
			this.uptoken = result.data.uptoken;

		});

    },
	 //上传图片
    upload (e) {
      //声明文件对象
	    let file = e.target.files[0];
	    // //只是为了显示图片，与上传没有关系
	    this.img_url=URL.createObjectURL(file);
      //声明参数
      let param = new FormData();
      //添加文件
      param.append('file', file,file.name);
      //声明头部
      let config = {
        headers: {'Content-Type': 'multipart/form-data'}
      }

	this.axios.post('http://127.0.0.1:8000/uploadfile/',param,config)
      .then(result=>{
		console.log(result)
		this.src = "http://127.0.0.1:8000/static/upload/"+ result.data.filename;
	 	
	  });
	}
}
}


</script>
 
<style>



</style>